import styles from './singer.less';
import React from 'react';
import 'antd-mobile/dist/antd-mobile.css';
import { Carousel, WingBlank, ActivityIndicator } from 'antd-mobile';
import NavLink from 'umi/navlink';
export default class Singer extends React.Component {
  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
    SongCategory: [],
    animating: true,
  };
  componentDidMount() {
    fetch('/api/client/groups.json')
      .then(response => response.json())
      .then(res => {
        console.log(res);
        setTimeout(() => {
          this.setState({
            data: [
              'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2736898734,2108201923&fm=26&gp=0.jpg',
              'https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=a2d332628444ebf86d246c39e9c9fb12/a8773912b31bb05131aab849357adab44bede0c1.jpg',
              'https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=e0f98daa40166d2238221d92761325cf/aa64034f78f0f7361ac146600955b319ebc41397.jpg',
            ],
            SongCategory: res.items,
            animating: !this.state.animating,
          });
        }, 100);
      });

    // simulate img loading
  }
  render() {
    return (
      <div className={styles.box}>
        <WingBlank>
          <Carousel
            className={styles.spacecarousel}
            frameOverflow="visible"
            cellSpacing={10}
            slideWidth={0.8}
            autoplay
            infinite
            afterChange={index => this.setState({ slideIndex: index })}
          >
            {this.state.data.map((val, index) => (
              <a
                key={val}
                href="https://music.163.com/#/user/home?id=1862816088"
                style={{
                  display: 'block',
                  position: 'relative',
                  top: this.state.slideIndex === index ? -10 : 0,
                  height: this.state.imgHeight,
                  boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
                }}
              >
                <img
                  className={styles.TU}
                  src={`${val}`}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </WingBlank>
        <div>
          {this.state.SongCategory.map((item, index) => {
            return (
              <div key={index}>
                <NavLink
                  className={styles.group}
                  to={{
                    pathname: `/dynamic-singer/$song/${item[0].id}`,
                    data: { id: item[0].id },
                  }}
                >
                  <div className={styles.singer}>
                    <div>{item[0].title}</div>
                    <img
                      className={styles.Right_arrow}
                      src="https://h5.1ting.com/touch/image/mobile/arrow_icon_normal.png"
                    />
                  </div>
                </NavLink>

                <NavLink
                  to={{
                    pathname: `/dynamic-singer/$song/${item[1].id}`,
                    data: { id: item[1].id },
                  }}
                  className={styles.group}
                >
                  <div className={styles.singer}>
                    <div>{item[1].title}</div>
                    <img
                      className={styles.Right_arrow}
                      src="https://h5.1ting.com/touch/image/mobile/arrow_icon_normal.png"
                    />
                  </div>
                </NavLink>
              </div>
            );
          })}
          <div className="toast-example">
            <ActivityIndicator toast text="Loading..." animating={this.state.animating} />
          </div>
        </div>
      </div>
    );
  }
}
